<template>
	<view>
		<view class="nav2">
			<u-navbar title="MBTI测试" bgColor="transparent" :fixed="false" @leftClick="leftBack">
			</u-navbar>
		</view>
		<u-gap height="80"></u-gap>
		<view class="textC f46 italic-text c343 bold">了解自己 从这一步开始</view>
		<view class="textC mt20 f46">
			目前已有<text class="f54 fw500 ml20 mr20">{{userNumber}}</text>用户参与测试
		</view>
		<u-gap height="50"></u-gap>
		<view class="m30">
			<view class="bgFff p30 radius30 data-box">
				<u-gap height="50"></u-gap>
				<view class="ban textC">
					<image src="../static/caractere/ban.png" mode="widthFix" class=""></image>
				</view>
				<u-gap height="20" v-if="newData.id"></u-gap>
				<view class="mt20 flex-au" v-if="newData.id">
					<view class="lock flex-jus" @click="openUrl('/subpage/caractere/shareunlock?id='+newData.id)">
						<image src="../static/caractere/report.png" mode=""></image>
						<text class="cyellow ml20 mr20 f24">查看最新报告</text>
						<u-icon name="arrow-right" size="14" color="#FF7F1C"></u-icon>
						<!-- <view class="flex-au">
							<text class="f26 cfff">111</text>
						</view> -->
					</view>
					<!-- <view v-else>
						<u-button shape="circle" color="#FFDE6D"
							@click="openUrl('/subpage/caractere/shareunlock?id='+newData.id)"
							:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D','height':'80rpx'}">
							查看最新报告
						</u-button>
					</view> -->
				</view>
				<u-gap height="30"></u-gap>
			</view>
			<u-gap height="30"></u-gap>
			<view>
				<u-button shape="circle" color="#FFDE6D" @click="openUrl('/subpage/caractere/answer')"
					:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D'}">
					开始测试
				</u-button>
			</view>
			<!-- <u-gap height="50"></u-gap>
			<view class="flex-au">
				<view class="mr20">
					<u-button color="#F6ECE1" @click="openUrl('/subpage/order/serviceResult')"
						:customStyle="{'color':'#34314F','fontWeight':'bold'}">
						性格测试
					</u-button>
				</view>
				<view>
					<u-button color="#F6ECE1" disabled @click="openUrl('/subpage/order/serviceResult')"
						:customStyle="{'color':'#34314F','fontWeight':'bold'}">
						测试报告
					</u-button>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getuserNoLock
	} from '@/common/api_character.js'
	import {
		getlogstats
	} from '@/common/api_car.js'
	export default {
		name: '',
		data() {
			return {
				newData: {},
				userNumber: 0
			}
		},
		onLoad(option) {

		},
		onShow() {
			this.getuserNoLock()
			this.getlogstats()
		},
		onShareAppMessage(res) {
			return {
				title: '你是I人还是E人？一测便知！',
				path: '/subpage/caractere/index',
				imageUrl: this.api_host +
					'/profile/upload/2024/07/26/0ccc020ae8964a1c845e3368328b6fac_20240726170243A001.jpg',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			async getlogstats() {
				let res = await getlogstats({
					type: 1
				})
				if (res.code == 200) {
					this.userNumber = res.data
				}
			},
			async getuserNoLock() {
				uni.showLoading({
					mask: true
				})
				const res = await getuserNoLock()
				if (res.code == 200) {
					this.newData = res.data || null
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.lock {
		border: 1px solid #FF7F1C;
		border-radius: 50rpx;
		padding: 10rpx 10rpx 10rpx 30rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		// view {
		// 	width: 64rpx;
		// 	height: 64rpx;
		// 	border-radius: 50%;
		// 	background-color: #FF7F1C;
		// 	justify-content: center;
		// }
	}

	.data-box {
		border: 2px solid #fff;
		background-color: #fff;
		background-image: linear-gradient(to bottom, #FFEDB2, #fff);
	}

	.ban {
		image {
			width: 80%;
		}
	}
</style>